<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>OMS | Kerry eCommerce Limited</title>
  <link rel="stylesheet" href="css/pagination.css">
</head>
<style>
  *{
    padding: 0;
    margin: 0;
  }
  .header{
    width: 100%;
    height: 70px;
    background-color: rgb(237, 109, 1);
    display: flex;
    justify-content:space-between
  }
  .search-content{
    display: flex;
    margin-top: 10px;
  }
  table tr th, td{
    padding: 5px 8px;
  }
</style>
<body>
<div class="" style="padding: 20px;">
  <div class="header">
    <p th:text="${message}" id="message" style="display: none"></p>
    <img src="img/logo.png" style="width: 180px;height: 50px;margin: 10px;" />
    <div style="line-height: 70px;margin-right: 50px;"><a href="https://oms-kec.kerry-ecommerce.com.cn/" style="color: #fff;">Click To KEC OMS</a></div>
  </div>
  <div class="search-content">
    <div>
      <p>Order Number</p>
      <textarea style="width: 200px; height: 80px;padding: 5px;font-size: 18px;"></textarea>
      <button style="width:20px;height:92px;position:absolute;left: 212px;">C<br/>l<br/>e<br/>a<br/>r</button>
    </div>
    <div style="margin-left: 20px;margin-top:20px">
      <p>Order Received At</p>
      <input id="start_date" style="height: 25px;">  -
      <input id="end_date" style="height: 25px;">
      <!-- <input type="text" placeholder="请选择日期和时间" id="date" style="width: 300px;"> -->
    </div>
    <div style="margin-left: 20px;margin-top:20px">
      <p>Status</p>
      <select style="height: 27px;width: 170px;">
        <option>Draft</option>
        <option>Created</option>
        <option>In Transit</option>
        <option>Delivered</option>
      </select>
    </div>
    <div style="margin-left: 50px;margin-top: 80px;">
      <button type="button" style="background-color: rgba(93, 96, 248, 0.589);border: none;color: #fff;padding: 8px 15px;border-radius: 5px;">Search</button>
      <button type="button" style="background-color: skyblue;border: none;color: #fff;padding: 8px 15px;border-radius: 5px;">Reset</button>
    </div>
  </div>
  <div class="table-content" style="margin-top: 20px;">
    <table border="1" id="datas" style="border-collapse: collapse;">
      <tr>
        <th>No.</th>
        <th>Status</th>
        <th>Order Number</th>
        <th>Tracking Number</th>
        <th>Channel Code</th>
        <th>Destination</th>
        <th>Consignee</th>
        <th>Order Received At</th>
        <th>order Created At</th>
      </tr>
      <tr id="template">
        <td id="id"></td>
        <td id="name"></td>
        <td id="age"></td>
        <td id="sex"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <div id="pages" style="position: absolute;left: 20;">

    </div>
  </div>
</div>
<!-- built files will be auto injected -->
<script src="laydate/laydate.js"></script>
<script src="js/pagination.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
  $(document).ready(function(){
    $.ajax({
      url:"test2/" + $("#message").text(),
      dataType:"json",
      type:"post",

      success:function(data){

      },
      error:function(arg){
        alert("数据加载失败")
        console.info(arg,'arg')
      }
    })
  })
  var totalPage = null
  var pageSize = 3
  var tableData = {
    data:[
      {id:1,name :"123",age:12,sex:'man'},
      {id:2,name :"1234",age:12,sex:'man'},
      {id:3,name :"1235",age:12,sex:'man'},
      {id:4,name :"1236",age:12,sex:'man'},
      {id:5,name :"1237",age:12,sex:'man'},
      {id:6,name :"1238",age:12,sex:'man'},
      {id:7,name :"1239",age:12,sex:'man'},
    ],
    total:7,
    pageSize:3
  }
  if(tableData.data && tableData.data.length > 0){
    $.each(tableData.data, function (i, n) {
      if(i == 0){
        var row = $("#template");
        row.find("#id").text(n.id);
        row.find("#name").text(n.name);
        row.find("#age").text(n.age);
        row.find("#sex").text(n.sex);
      }else{
        var row = $("#template").clone();
        row.find("#id").text(n.id);
        row.find("#name").text(n.name);
        row.find("#age").text(n.age);
        row.find("#sex").text(n.sex);
      }
      row.appendTo("#datas");//添加到模板的容器中
    });
  }

  totalPage = tableData.total
  new Pagination({
    element: '#pages',
    type: 1,
    pageIndex: 1,
    pageSize: pageSize,
    pageCount: 5,
    total: totalPage,
    jumper: true,
    singlePageHide: false,
    prevText: '上一页',
    nextText: '下一页',
    disabled: true,
    currentChange: function(index) {
      console.log(index,'00');
    }
  });
  //设置开始时间
  var startDate = laydate.render({
    elem: '#start_date',//开始时间选择控件id
    min:'2018-6-1',
    type: 'datetime',
    format: 'yyyy-MM-dd HH:mm', //可任意组合
    done: function (value, date) {
      if (value !== '') {
        endDate.config.min.year = date.year;
        endDate.config.min.month = date.month - 1;
        endDate.config.min.date = date.date;
        endDate.config.min.hours=date.hours;
        endDate.config.min.minutes=date.minutes;

      } else {
        endDate.config.min.year = '';
        endDate.config.min.month = '';
        endDate.config.min.date = '';
        endDate.config.min.hours = '';
        endDate.config.min.minutes = '';
      }
    }
  });

  //设置结束时间
  var endDate = laydate.render({
    elem: '#end_date',//结束时间选择控件id
    type: 'datetime',
    format: 'yyyy-MM-dd HH:mm', //可任意组合
    done: function (value, date) {
      if (value !== '') {
        startDate.config.max.year = date.year;
        startDate.config.max.month = date.month - 1;
        startDate.config.max.date = date.date;
        startDate.config.max.hours = date.date;
        startDate.config.max.minutes = date.date;
      } else {
        startDate.config.max.year = '';
        startDate.config.max.month = '';
        startDate.config.max.date = '';
        startDate.config.max.hours = '';
        startDate.config.max.minutes = '';
      }
    }
  });
</script>
</body>
</html>
